<template>
  <PageContainer>
    <div class="pl-[30px]">
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="companyInfo"
          :rules="rules"
          label-width="auto"
          class="demo-companyInfo"
          status-icon
        >
          <el-form-item label="法人姓名" prop="legalname" required>
            <el-input v-model="companyInfo.legalname" placeholder="请输入您的姓名" />
          </el-form-item>
          <el-form-item label="法人身份证号" prop="idCard" required>
            <el-input
              v-model="companyInfo.idCard"
              placeholder="请输入您的身份证号"
              v-restrict-to-number:positive-number
            />
          </el-form-item>
          <el-form-item label="身份证有效期" prop="idcardExpire" required>
            <el-input v-model="companyInfo.idcardExpire" placeholder="有效期xx年xx月xx日-xx年xx月xx日" />
          </el-form-item>
          <el-form-item label="营业执照" required>
            <ImagePicker />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName" required>
            <el-input v-model="companyInfo.companyName" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="企业类型" prop="companyType" required>
            <el-input v-model="companyInfo.companyType" placeholder="请输入企业类型" />
          </el-form-item>
          <el-form-item label="企业所在地" prop="type" required>
            <el-input v-model="companyInfo.companyType" placeholder="请输入企业类型" />
          </el-form-item>
          <el-form-item label="企业办公地址" prop="companyAddress" required>
            <el-input v-model="companyInfo.companyAddress" placeholder="请输入企业办公地址" />
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input v-model="companyInfo.creditCode" placeholder="请输入社会信用代码" />
          </el-form-item>
        </el-form>
        <BottomButton>
          <el-button plain type="primary">暂存</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </BottomButton>
      </div>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'

defineOptions({
  name: 'CompanyInfo',
})

interface CompanyInfoForm {
  legalname: string
  idCard: string
  idcardExpire: string
  companyName: string
  companyType: string
  companyAddress: string
  creditCode: string
}
const ruleFormRef = ref<FormInstance>()
const companyInfo = reactive<CompanyInfoForm>({
  legalname: '',
  idCard: '',
  idcardExpire: '',
  companyName: '',
  companyType: '',
  companyAddress: '',
  creditCode: '',
})
const rules = reactive<FormRules<CompanyInfoForm>>({
  // date1: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: 'Please pick a date',
  //     trigger: 'change',
  //   },
  // ],
  // date2: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: 'Please pick a time',
  //     trigger: 'change',
  //   },
  // ],
  // location: [
  //   {
  //     required: true,
  //     message: 'Please select a location',
  //     trigger: 'change',
  //   },
  // ],
  // type: [
  //   {
  //     type: 'array',
  //     required: true,
  //     message: 'Please select at least one activity type',
  //     trigger: 'change',
  //   },
  // ],
  // resource: [
  //   {
  //     required: true,
  //     message: 'Please select activity resource',
  //     trigger: 'change',
  //   },
  // ],
  // desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
})
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="scss" scoped></style>
